<template>
    <div class="form_voluntter">
            <div class="head_volunteer"><strong>在线捐款</strong></div>
            <div class="form">
              <div class="form_left">
              <h4 class="h4">个人信息</h4>
              <el-form ref="ruleFormRef"  :rules="rules" label-position="left" :model="form" label-width="auto" style="max-width: 600px">
                  <el-form-item label="捐赠救助站:" prop="moneyRescueName">                
                    <el-select style="width: 59%;" v-model="form.moneyRescueName"  placeholder="请选择">
                        <el-option :label="item.stationName" :value="item.stationName" v-for="item in state.reqHelpList" :key="item" />              
                    </el-select>
                  </el-form-item>
                    <el-form-item label="金额" prop="moneyPrice">
                        <el-radio-group v-model="form.moneyPrice">
                            <el-radio value="10" @click="isshow=0">10</el-radio>
                            <el-radio value="50"@click="isshow=0">50</el-radio>
                            <el-radio value="100"@click="isshow=0">100</el-radio>
                            <div></div>
                            <el-radio :value="form.otherPrice" @click="isshow=1">其他金额</el-radio>
                            <el-input v-show="isshow==1" style="width: 59%;" v-model="form.otherPrice" />
                        </el-radio-group>
                    </el-form-item>
                  <el-form-item label="捐赠人姓名：" prop="moneyUserName">
                    <el-input style="width: 59%;" v-model="form.moneyUserName" />
                  </el-form-item>
                  <el-form-item label="是否匿名：" prop="moneyIsAnonym">
                    <el-radio-group v-model="form.moneyIsAnonym">
                      <el-radio value="1">是</el-radio>
                      <el-radio value="2">否</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="手机号:" prop="moneyPhone">
                    <el-input style="width: 59%;" v-model="form.moneyPhone" />
                  </el-form-item>                                    
                  <el-form-item label="捐赠留言"style="padding-left: 5px;">
                    <el-input style="width: 59%;" v-model="form.moneyMessage" />
                  </el-form-item>
                  <el-form-item>
                    <el-button class="btn" @click="submitForm(ruleFormRef)" type="primary">立即捐赠</el-button>
                  </el-form-item>
               </el-form>
              </div>
              <div class="form_right">
                <div class="donateLog">
                    <div>捐赠记录</div>
                </div>
                <div class="log">
                    <div class="logItem" v-for="item in state.donationList">
                        <div>{{ item.moneyUserName }}</div>
                        <div>{{ item.moneyPrice }}</div>
                        <div>{{ item.moneyTime }}</div>
                    </div>                            
                </div>
              </div>          
            </div>           
          </div>
    </template>
    <script  setup >
    import { onMounted, reactive, ref } from "vue";
    import { reqDonation, reqDonationList ,reqHelpList} from "@/api/donate/index.js";
    import {formatDateTime} from "@/utils/date.js";
    const isshow = ref(0)
    const state = reactive({
      donationList: [],
      reqHelpList:[]
    })
    // 表单数据
    const form = reactive({
        moneyUserId: JSON.parse(window.localStorage.getItem("userInfo")).id,
        moneyRescueName: "",
        moneyUserName: "",
        moneyName: "",
        moneyIsAnonym: "1",
        moneyPrice: '',
        otherPrice: 0,
        moneyPhone: "",
        moneyMessage: "",
    })
    const ruleFormRef = ref()
    //表单校验
    const rules = reactive({
        moneyRescueName: [
        { required: true, message: '请选择救助站', trigger: 'blur' },
      ],
      moneyPrice: [
        {
          required: true,
          message: '请输入金额',
          trigger: 'blur',
        },
      ],
      moneyPhone: [
        {
          required: true,
          message: '请输入手机号码',
          trigger: 'blur',
        },
        { min: 11, max: 11, message: '输入正确的手机号码', trigger: 'blur' },
      ],
      moneyUserName: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 1, max: 14, message: 'Length should be 1 to 14', trigger: 'blur' },
      ],
      moneyIsAnonym: [
        {required: true,message: '请选择是否匿名',trigger: 'change', },
      ],
    })
    //提价表单
    const submitForm = async (formEl) => {
      if (!formEl) return
      await formEl.validate(async (valid, fields) => {
        if (valid) {
          const res=await reqDonation(form)
          if(res.code==200){            
            ElMessage({
              message: '捐赠成功',
              type: 'success',
            })
            getDonateList() 
          }
        } else {
          console.log('error submit!', fields)
        }
      })
    }
    //获取捐赠记录
   const getDonateList=async()=>{
     const res=await reqDonationList()
     if(res.code===200){
       state.donationList=res.data
       state.donationList.forEach(item=>{
        if(item.moneyTime==null){
          item.moneyTime=new Date()
        }
         item.moneyTime=formatDateTime(item.moneyTime)
       })
     }   
    }
    //获取救助站列表
    const getHelpList=async()=>{
      const res=await reqHelpList()
      if(res.code===200){
        console.log(res.data)
        state.reqHelpList=res.data
        
      }
    }
    //页面加载完成后获取数据
    onMounted(() => {
      getDonateList()
      getHelpList()
    })
   
    </script>
    
    <style lang="less" scoped>
    
    .form_voluntter{
       width: 100%;
       margin-top: 25px;
    }
    .head_volunteer{
        font-family: "微软雅黑 Bold", "微软雅黑", sans-serif;
        text-align: center;
        width: 10%;
        background-color: #09C199;
        color: #fff;
        border-radius: 7px 7px 0 0;
      }
      .form{
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-bottom: 60px;
        .form_left{
          flex: 1;
          .btn{
            background-color: #09C199;
            width: 20%;
            height: 40%;
            margin-top: 10%;          
          }
        }
        .form_right{
            position: relative;
            top: -94px;
            width: 30%;
          margin-top: 6%;
          .donateLog{
            min-width: 67px;
            width: 30%;
            font-family: "微软雅黑 Bold", "微软雅黑", sans-serif;
            text-align: center;            
            background-color: #09C199;
            color: #fff;
            border-radius: 7px 7px 0 0;
          }
          .log{
            min-width: 210px;
             width: 100%;
             max-height: 500px;
             overflow: scroll;         
             border: 1px solid #09C199;
             padding: 10px;
             .logItem{
                display: flex;
                justify-content: space-between;
                color:  #333333;
             }
          }
         
        }
      }
      .h4{
          width: 70%;
          margin: 0;
          padding: 20px 0;
          border-top: 1px solid #09C199;
            }
    
    </style>
    